<template>
    <div class="site-detail f f-ac f-col">
        <Breadcrumb router />
        <div class="site-detail-body">
            <div class="body-top f f-ac f-jb">
                <img class="top-left" :src="baseUrl+detail.image" />
                <div class="top-right f f-col f-js">
                    <div class="skill-title line-1">{{ detail.title || "-" }}</div>
                    <div class="mb-20">{{ detail.tags? detail.tags[0] :'' }}</div>
                    <div class="mb-20">{{ detail.tags? detail.tags[1] : ''}}</div>
                    <div class="mb-20">{{ detail.tags? detail.tags[2] : "" }}</div>
                    <div class="mb-20 line-3" v-html="detail.content" />
                </div>
            </div>
            <div class="body-bottom mt-30">
                <My-btn label="活动预定室" bg-color="line-blue" read-only />
                <div class="week-title mt-30 f f-ac f-ja">
                    <div v-for="(i, k) in weekList" :key="k" class="week">{{ i.week }}</div>
                </div>
                <div class="f f-ac f-ja mt-30 bm-border" style="align-items: flex-start;">
                    <div v-for="(i, k) in timeList" :key="k">
                        <My-btn v-for="(t, w) in i" :key="w" :label="t.times" size="14" :read-only="t.disabled"
                            v-if="t.times" :bg-color="t.disabled ? 'dark-gray' : t.check ? 'line-blue' : 'line-gray'"
                            class="mb-30" @click="handleCheck(k, w,t)" />
                    </div>
                </div>
                <div class="f f-ac f-jc mt-30 mb-70">
                    <My-btn label="立即预定" bg-color="dark-blue" width="177" height="39" @click="handleReserved" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        venueSite
    } from "@/utils/order/index.js";
    export default {
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
                detail: {},
                weekList: [],
                timeList: [],
                application_time: '',
                venue_lists_id:''
            };
        },

        mounted() {},
        created() {
            this.detail.id = this.$route.query.id
            this.venue_lists_id = this.$route.query.venue_lists_id
            this.getDetails(this.detail.id);
            this.pp()
        },
        methods: {
            pp() {
                //获取当前年月日
                var now = new Date();
                var year = now.getFullYear(); //得到年份
                var month = now.getMonth() + 1; //得到月份
                var date = now.getDate(); //得到日期
                var check = [];
                for (let i = 0; i < 7; i++) {
                    //24 * 3600 * 1000 就是计算一天的时间  
                    var date = new Date(now.getTime() + i * 24 * 3600 * 1000);
                    var year = date.getFullYear();
                    var month = date.getMonth() + 1;
                    var day = date.getDate();
                    var dt2 = new Date(now.getTime() + i * 24 * 3600 * 1000);
                    var weekDay = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
                    var weekDays = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];

                    // console.log(duty);
                    //把七天的时间和星期添加到数组中

                    check.push({
                        date: year + "-" + month + "-" + day,
                        month: month + "-" + day,
                        day: day,
                        weekday: weekDays[dt2.getDay()],
                        week: weekDay[dt2.getDay()],
                    });

                }

                this.weekList = check
            },
            // 获取详情
            getDetails(id) {
                let that = this
                venueSite({
                    id
                }).then((response) => {
                    if (response.code == 200) {
                        that.detail = response.data
                        that.detail.tags = that.detail.tags.split(',')
                        // that.timeList = that.detail.time_json[`${this.weekList[0].weekday}`].filter(item => item.times != '')
                        // console.log(that.timeList,' that.timeList')
                        for (let i in that.detail.time_json) {
                            that.timeList.push(that.detail.time_json[i]) //
                        }
                    }

                });
            },
            // 选择预约时间端
            handleCheck(k, w, item) {
                // console.log(item, 'w', k)
                
                // let temp = this.detail.time_json[`${this.dayList[this.tabCurrent].weekday}`]
				// this.timeList = temp.filter(i => i.times != '')

                this.application_time = this.weekList[k].date
                this.timeList.forEach((i, index) => {
                    if (index == k) {
                        i.forEach((j, idx) => {
                            j.check = idx == w ? !j.check : false;
                        });
                    } else {
                        i.forEach((j) => {
                            j.check = false;
                        });
                    }
                });
            },
            // 确认预约
            handleReserved() {
                let time = "";
                this.timeList.forEach((i) => {
                    i.forEach((j) => {
                        if (j.check) time = j.times;
                    });
                });
                if (time) {
                    this.$router.push({
                        path: "/reservedSite/signUp",
                        query: {
                            id: this.detail.id,
                            time: time,
                            application_time: this.application_time,
                            venue_lists_id:this.venue_lists_id
                        },
                    });
                } else {
                    this.$message.warning("请选择预约时间");
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .site-detail {
        width: 100%;

        &-body {
            width: 1200px;

            .body-top {
                width: 100%;
                height: 292px;
                padding: 30px 0;
                border-bottom: 1px solid #d9d9d9;

                .top-left {
                    width: 408px;
                    height: 292px;
                    margin-right: 30px;
                }

                .top-right {
                    width: 762px;
                    height: 292px;

                    .skill-title {
                        color: #193980;
                        font-size: 24px;
                        font-weight: 600;
                        line-height: 50px;

                        &::after {
                            content: "";
                            display: block;
                            width: 115px;
                            height: 2px;
                            background: #0a4ab6;
                            margin: 20px 0;
                        }
                    }
                }
            }

            .body-bottom {
                .week-title {
                    background-color: #193980;
                    height: 60px;

                    .week {
                        color: #fff;
                        font-size: 16px;
                    }
                }

                .bm-border {
                    border-bottom: 1px solid #d9d9d9;
                }
            }
        }
    }
</style>